<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-bar-chart"></i> Morris Chart</h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="#"> Home </a> </li>
      <li class="active"> Morris </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<!-- Morris Chart Start -->
<div class="page page-charts" data-ng-controller="morrisChartCtrl">

  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
          <div class="panel-heading">
             <h3 class="panel-title"> Morris Line Chart </h3> 
          </div>
        <div class="panel-body">
          <div morris-chart data-data="simple1.data" data-type="simple1.type" data-options="simple1.options"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
          <div class="panel-heading">
             <h3 class="panel-title"> Morris Area Chart </h3> 
          </div>
        <div class="panel-body">
          <div morris-chart data-data="simple2.data" data-type="simple2.type" data-options="simple2.options"></div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">
  
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Combined Line Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="combo1.data" data-type="combo1.type" data-options="combo1.options"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Combined Area Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="combo2.data" data-type="combo2.type" data-options="combo2.options"></div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Morris Bar Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="bar1.data" data-type="bar1.type" data-options="bar1.options"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Stacked Bar Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="bar2.data" data-type="bar2.type" data-options="bar2.options"></div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">
  
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Morris Donut Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="donut1.data" data-type="donut1.type" data-options="donut1.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Colorful Donut Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="donut2.data" data-type="donut2.type" data-options="donut2.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Formatted Donut Chart </h3> 
        </div>
        <div class="panel-body">
          <div morris-chart data-data="donut3.data" data-type="donut3.type" data-options="donut3.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>
    
  </div>
  
</div>
<!-- Morris Chart End -->